<template>
  <div class="input-com">
    <span class="input-label" :class="{'label-trans': isFocus}">{{ label }}</span>
    <input autocomplete="off" :maxlength="maxLength" :type="type" :class="{'focus': isFocus}" @focus="shouldFocus" @blur="shouldBlur" v-model="inputVal">
  </div>
</template>
<script>
  export default {
    name: 'trans-label-input',
    props: {
      // label 输入框提示信息
      label: {
        type: String,
        default: '请输入相关信息'
      },
      // input type
      type: {
        type: String,
        default: 'text'
      },
      // 输入文本最大长度
      maxLength: {
        type: Number,
        default: 140
      }
    },
    data () {
      return {
        isFocus: false,
        inputVal: ''
      }
    },
    watch: {
      inputVal (val) {
        this.$emit('result', val)
      }
    },
    methods: {
      shouldFocus () {
        this.isFocus = true
      },
      shouldBlur () {
        this.inputVal ? (this.isFocus = true) : (this.isFocus = false)
      }
    }
  }
</script>
<style lang="scss">
  .input-com {
    position: relative;
    .input-label {
      position: absolute;
      display: inline-block;
      left: 16px;
      top: 13px;
      padding: 0 4px;
      margin-right: 10px;
      letter-spacing: 0.23px;
      font-size: 15px;
      color: #222;
      background: #fff;
      transition: all linear .2s;
    }
    input {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      height: 44px;
      padding: 0 16px;
      background: transparent;
      outline: none;
      font-size: 14px;
      border: 1px solid #cad0d8;
      border-radius: 2px;
      z-index: 1;
    }
    .focus {
      border-color: #00ba91;
    }
    .label-trans {
      top: -6px;
      font-size: 12px;
      z-index: 2;
    }
  }
</style>
